<template>
    <div class="ai-tchain-section">
        <slot></slot>
         <div style="margin-bottom: 1em;">

         </div>
    </div>
    <!-- TestChainInfo Table -->
    <el-table v-loading="loading" :data="df" @sort-change="U.sortChange" >
        <el-table-column prop="projectId" label="项目ID" width="180" />
        <el-table-column prop="cid" label="链路ID" width="180" sortable="custom" />
        <el-table-column prop="projectName" label="项目名称" width="300" sortable="custom" />
        <!-- <el-table-column prop="creatorD" label="作者" width="200" />  🦜: token should not be visible-->
        <el-table-column prop="createdAtD" label="创作时间" width="200" />
        <el-table-column prop="N" label="链路长度" width="100" />
        <el-table-column>
            <template #header>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>状态</div>
                    <div style="display: flex; align-items: center;">
                        <el-input
                            v-model="q04_projectName"
                            placeholder="输入项目名称进行过滤"
                            :prefix-icon="iconSearch"
                            clearable
                        />
                        <el-button style="margin-left: 0.5em" :icon="Refresh" circle @click="f00_getChains()" />
                    </div>
                </div>
            </template>
              <template #default="scope">
                  <span class="blink" style="display: inline-flex; align-items: center; margin-right: 10px;">
                      <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4" :fill="scope.row.colorD" /> </svg>
                  </span>
                  <el-text v-if="scope.row.paused" class="blink" type="info">{{ scope.row.statusD }} </el-text>
                  <el-text v-else class="blink" type="success">{{ scope.row.statusD }} </el-text>
                  <!-- <span class="blink" style="margin-left: 10px">{{ scope.row.statusD }}</span> -->
                  <el-button style="margin-left: 12px;" v-if="scope.row.done" :icon="Search" size="small" @click="U.view(scope.row)" plain circle />
              </template>
        </el-table-column>
      </el-table>

      <!-- <pagination v-show="q02_totalCount>0" :total="q02_totalCount"
           v-model:page="q01_pageIdx"
           v-model:limit="q03_pageSize" @pagination="f00_getChains()" /> -->

      <el-pagination
          style="margin-left:1.2em; margin-top: 2em; margin-bottom: 2em; text-align: center;"
          v-model:current-page="q01_pageIdx"
          v-model:page-size="q03_pageSize"
          :page-sizes="[5, 10, 20]"
          background
          size="default"
          layout="total, sizes, prev, pager, next, jumper"
          :total="q02_totalCount"
          @size-change="f01_handleFilter"
          @current-change="f01_handleFilter"
      />

</template>

<script setup lang="ts">
 import { Search, Edit, Download, Calendar, Upload, Document, Plus, Warning, Refresh, Close} from '@element-plus/icons-vue';
 const P = defineProps(['df', 'q02_totalCount', 'loading']);
 const emit = defineEmits(['f00_getChains', 'q04_projectName', 'update:q04_projectName',
                           'update:q01_pageIdx', 'update:q03_pageSize', 'f01_handleFilter'
 ]);

 import { watch, ref, onMounted, markRaw, reactive } from 'vue';

 import {TestChainInfo} from '@/api/hi_api';

 const f00_getChains = () => {
     emit('f00_getChains');
 };

 const f01_handleFilter = () => {
     emit('f01_handleFilter');
 };

 import { useRouter } from 'vue-router';
 const router = useRouter();
 const q04_projectName = defineModel('q04_projectName');
 const q03_pageSize = defineModel('q03_pageSize');
 const q01_pageIdx = defineModel('q01_pageIdx');
 const q05_sort = defineModel('q05_sort');
 const q06_ascending = defineModel('q06_ascending');


 const iconSearch = markRaw(Search);
 class U{
     static sortChange = async (data: any) => {
         const { prop, order } = data;
         console.log('🦜 : sortChange ->', prop, order);
         // Update the sorting parameters
         q05_sort.value = prop;
         q06_ascending.value = order === 'ascending' ? true : false;
         f01_handleFilter();
     };
     static view = (row: TestChainInfo) => {
         console.log("viewing row: ", row);
         // Navigate to the edit page with the cid
         if (row && row.cid) {
             router.push({ name: 'chain-view', params: { cid: row.cid } });
         } else {
             console.error('Invalid row data for editing', row);
         }
     };
}
</script>
